<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/11/26
  Time: 下午8:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    .login{
        margin: 20px auto;
        padding: 30px 20px 0;
        width: 400px;
        text-align: center;
        float: right;
        border-left: 1px solid #000;
    }
    .login h1{
        color: #045e9e;
    }
    .center{
        /*margin: auto;*/
        margin-top: 50px;
    }
    .center a{
        text-decoration: none;
        margin-left: 260px;
        color: #065d9c;
    }

    .login-button{
        width: 350px;
        height: 45px;
        background-color:  #065d9c;
        font-weight: bold;
        color: white;
        text-decoration: none;
        border-radius: 40px;
        border-color: #065d9c;
        border-bottom:  #065d9c;
        border-right:  #065d9c;
        font-size: 18px;
        margin-top: 35px;
        transition: 0.5s;

    }
    .login-button:hover {
        transform: scale(1.1);
        cursor: pointer
    }
    .login-num{
        width: 350px;
        height: 38px;
        margin-bottom: 30px;
        background-color: #b2d8f8;
        border:#b2d8f8 ;
        transition: 0.5s;

    }
    .login-num:hover {
        transform: scale(1.1);
        cursor: pointer
    }
    .login-pwd{
        width: 350px;
        height: 38px;
        background-color: #b2d8f8;
        border:#b2d8f8 ;
        transition: 0.5s;

    }
    .login-pwd:hover {
        transform: scale(1.1);
        cursor: pointer
    }
    .background{
        margin-top: 130px;
        margin-left: 330px;
        width: 800px;
        height: 500px;
        border-radius: 40px;
        box-shadow: -10px 10px 40px #000000;
        background-color: #fff;
        opacity: 0.9;
    }
    .change-register-box{
        color: #999999;
        border-radius: 40px;
    }
    .change-register-box a{
        color: #065d9c;
        text-decoration: none;

    }
    .dl-z{

        margin: 80px 0 0 80px;
        float: left;
    }
    .dl-z h2{
        margin-top: -20px;
        margin-left: 26px;
        height: 50px;
        border-radius:40px;
        color: #065d9c;
        width: 100%;
    }
    .dl-z .ewm img{
        width: 260px;
        height: 250px;
        margin-left: -70px;
        margin-top: -30px;
    }
    .dl-z .bottom img{
        width: 25px;
        height: 25px;
        margin-bottom: -8px;
    }
    .dl-z .bottom{
        margin-top: 25px;
        margin-left: -10px;
    }
    .dl-z .sm{
        font-size: 14px;
        color: #999999;
        margin-left: 60px;
        margin-top: 30px;
    }
    .beijing{
        background: url(./背景1.jpg);
        background-size:100%;
    }
</style>
<body class="beijing">
<div class="background">
    <div class="login">
        <h1>欢迎登录</h1>
        <form action="login.do" class="center"   method="post">
            <input type="text" class="login-num" name="username" placeholder="请输入账号">
            <input type="password" class="login-pwd" name="password" placeholder="请输入密码"><br>
            <input type="submit" value="登&nbsp;&nbsp;录" class="login-button">
        </form>
        <div class="change-register-box">
        <p class="a">还没有账户？</p>
        <p class="b">点击加入我们吧</p>
        <p class="change-register-button"><a href="register.jsp">注册 &nbsp;</a></p>
        </div>
    </div>
    <div>
        <div class="dl-z">
            <h2>手机扫描登录</h2>
            <div class="ewm"><img src="./erweima.jpg" alt=""></div>
            <div class="bottom">可用 <img src="./qq.jpg" alt=""> <strong>QQ</strong>或者 <img src="./weixin.jpg" alt=""><strong>微信</strong> 扫码</div>
            <div class="sm">如何扫码登录？</div>
        </div>
    </div>

</div>

</body>
</html>
